<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="on">出现</button>
    <button id="off">消失</button>
    <button id="toggle">切换</button>
    <script>
        var box = $('.box')
        var on = $('#on')
        var off = $('#off')
        var toggle = $('#toggle')

        on.on('click',function(){
            box.show()//出现
            // box.fadeIn()淡入
            // box.slideDown()//划上
        })
        off.on('click',function(){
            // box.hide()
            box.fadeOut() 
            // box.slideUp()
        })
        toggle.on('click',function(){
            // box.toggle()
            // box.fadeToggle()
            box.slideToggle()
            // box.fadeTo(2000,.5)
        })

    </script>    
</body>
</html>